{% extends 'base.html' %}

{% block content %}
<style>
  .table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ddd;
}

.table th, .table td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.table th {
  background-color: #f5f5f5;
}

.table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

.table tbody tr:hover {
  background-color: #f1f1f1;
}

</style>
  <h1>成绩列表</h1>
  <a href="{% url 'add_score' %}">添加成绩表</a>
  <!-- 创建标签页导航 -->
  <ul class="nav nav-tabs">
    {% for date, score_list in scores.items %}
        <li class="nav-item">
            <a class="nav-link{% if forloop.first %} active{% endif %}" data-toggle="tab" href="#{{ date|date:'Y-m-d' }}">{{ date|date:'Y-m-d' }}</a>
        </li>
    {% endfor %}
</ul>

  <!-- 创建标签页内容 -->
  <div class="tab-content">
    {% for date, score_list in scores.items %}
        <div class="tab-pane{% if forloop.first %} active{% endif %}" id="{{ date|date:'Y-m-d'  }}">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>得分</th>
                        <th>加分</th>
                    </tr>
                </thead>
                <tbody>
                    {% for score in score_list %}
                        <tr>
                            <td>{{ score.student.name }}</td>
                            <td>{{ score.score }}</td>
                            <td>{{ score.add_score }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% endfor %}
</div>


<script>
    
  $(function() {
    console.log('ready');
      // 初始化选项卡
      $('.nav-tabs a').on('shown.bs.tab', function (e) {
            // alert(active_tab);
            var tab_id = $(this).attr('href');
            var active_tab = localStorage.getItem('active_tab');
            //  alert(tab_id); // 输出变量tab_id的值
             localStorage.setItem('active_tab', tab_id);
            $(tab_id).removeClass('tab-pane').addClass('tab-pane active show');
            $(active_tab).removeClass('tab-pane active show').addClass('tab-pane');
      });
      
      // 恢复活动选项卡
      var active_tab = localStorage.getItem('active_tab');
      
      if (active_tab) {
          $('.nav-tabs a[href="' + active_tab + '"]').tab('show');
          $(active_tab).removeClass('tab-pane').addClass('tab-pane active show');
        //   alert(active_tab); // 输出变量tab_id的值
      }else {
        // 显示默认选项卡
        $('.nav-tabs a:first').tab('show');
        alert("默认"); // 输出变量tab_id的值
    }
  });
</script>
{% endblock %}